<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>ToolBarButton</title>
		<link href="../../../themes/iphone/base.css" rel="stylesheet"/>
		<link href="../../../themes/iphone/TabBar.css" rel="stylesheet"/>
		<link href="../../../themes/common/domButtons.css" rel="stylesheet"/>

		<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>

		<script language="JavaScript" type="text/javascript">
			//dojo.require("dojo.parser"); // Use the lightweight parser.
			dojo.require("dojox.mobile.parser");
			dojo.require("dojox.mobile");
			dojo.require("dojox.mobile.TabBar");
			dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

	        dojo.require("doh.runner");
			dojo.addOnLoad(function(){

				var view = dijit.byId("general");
				var demoWidget = new dojox.mobile.Heading({label:"World Clock"});
//				view.addChild(demoWidget);
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				var childWidget = new dojox.mobile.ToolBarButton({id:"btn1", label:"Edit", style:{padding:"0px 14px"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"mblDomButtonWhitePlus", style:"float:right;", onclick:"console.log('+ was clicked')"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();

				demoWidget = new dojox.mobile.Heading({label:"Alarm Clock"});
//				view.addChild(demoWidget);
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({label:"Edit", style:{padding:"0px 14px"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"mblDomButtonWhitePlus", style:{float:"right"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();

				demoWidget = new dojox.mobile.Heading({label:"Voice Memos"});
//				view.addChild(demoWidget);
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({label:"Speaker"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({label:"Done", btnClass:"mblColorBlue", style:{float:"right"}});
				dojo.removeClass(childWidget.domNode, "mblColorDefault ");
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();

				demoWidget = new dojox.mobile.Heading({label:"Updatess"});
//				view.addChild(demoWidget);
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({label:"Update All", style:{float:"right"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();

				demoWidget = new dojox.mobile.Heading({label:"News", back:"Bookmarks", moveTo:"bookmarks"});
//				view.addChild(demoWidget);
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({label:"Done", btnClass:"mblColorBlue", style:{float:"right"}});
				dojo.removeClass(childWidget.domNode, "mblColorDefault ");
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();

				demoWidget = new dojox.mobile.Heading();
//				view.addChild(demoWidget);
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({label:"Done", btnClass:"mblColorBlue"});
				dojo.removeClass(childWidget.domNode, "mblColorDefault ");
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({label:"New Folder", style:{float:"right"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();

				demoWidget = new dojox.mobile.Heading();
//				view.addChild(demoWidget);
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({label:"New", toggle:"true"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({label:"Toggle", toggle:"true"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"../../images/a-icon-12.png", moveTo:"view3"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"../../images/tab-icons.png", iconPos:"29,0,29,29", moveTo:"view3"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"mblDomButtonWhitePlus", iconPos:"29,0,29,29", style:{float:"right"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();

				demoWidget = new dojox.mobile.Heading();
//				view.addChild(demoWidget);
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"mblDomButtonWhiteSearch", style:{float:"right"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();

				demoWidget = new dojox.mobile.Heading({align:"center"});
//				view.addChild(demoWidget);
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"mblDomButtonWhitePlus"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"../../images/tab-icon-15h.png", style:{float:"right"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();

				demoWidget = new dojox.mobile.Heading({label:"Inbox(32)", back:"Top"});
//				view.addChild(demoWidget);
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"mblDomButtonWhiteSearch", style:{float:"right"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"mblDomButtonWhiteUpArrow", style:{float:"right"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({icon:"mblDomButtonWhiteDownArrow", style:{float:"right"}});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				
				// Test cases for #16771
				// a) With arrow but no label (nor icon)
				demoWidget = new dojox.mobile.Heading();
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({arrow:"left"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				
				demoWidget = new dojox.mobile.Heading();
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({arrow:"right"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				
				// b) With arrow, icon and label
				demoWidget = new dojox.mobile.Heading();
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({arrow:"left", icon:"mblDomButtonWhiteDownArrow", label:"some label"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				
				demoWidget = new dojox.mobile.Heading();
				demoWidget.placeAt(view.containerNode);
				demoWidget.startup();
				childWidget = new dojox.mobile.ToolBarButton({arrow:"right", icon:"mblDomButtonWhiteDownArrow", label:"some label"});
				childWidget.placeAt(demoWidget.containerNode);
				childWidget.startup();
				// end of test cases for #16771
			});
		</script>
		<script type="text/javascript" src="../TestUtil.js"></script>
		<script type="text/javascript" src="ToolBarButton.js"></script>
	</head>
	<body>
		<div id="general" dojoType="dojox.mobile.View" selected="true">
		</div>

	</body>
</html>
